<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>
<body>
    <div id="box">
        <div id="child">1111111</div>
    </div>
    <script>
        var odiv = document.createElement('div')
        odiv.innerHTML = '我是新创建的节点'
        console.log(odiv)

        // box.appendChild(odiv)

        box.insertBefore(odiv, child)

        // box.removeChild(child)

        // box.remove()

        var odiv1 = document.createElement('div')
        odiv1.innerHTML = '我是新替换的节点'
        box.replaceChild(odiv1, child)

        //默认不克隆后代 true克隆后代 
        var oCloneBox = box.cloneNode(true)
        console.log(oCloneBox)

        document.body.appendChild(oCloneBox)
    </script>
</body>
</html>